<template>
  <div class="register">
<h1>
  <i @click="fun()" class="iconfont icon-zuojiantou"></i>
  <span>注册</span>
</h1>
<h2>
  <i class="iconfont icon-shouji"></i>
  <input name="phone" type="number" placeholder="请输入手机号" v-model="phone" @change="sendcode($event)"/>
  <span>中国</span>
  <i class="iconfont icon-xiajiantou"></i>
</h2>
<h3>
  <i class="iconfont icon-yanzhengma"></i>
  <input type="text" placeholder="请输入验证码">
  <i>获取验证码</i>
</h3>
<h4>
  <i class="iconfont icon-mima"></i>
  <input type="text" placeholder="请输入密码（不小于6位）">
</h4>
<h5>
  <button>注册</button>
</h5>
<h6>
  <input type="checkbox">
  <span>请仔细阅读并同意</span>
  <span>《用户协议》《隐私政策》</span>
</h6>
  </div>
</template>

<script>

  export default {
    date: function () {
      return {
        disabled:false,
        time:0,
        formMess:{
          phone:this.phone
        }
      }
    },
    mounted: function () {
    },
    methods:{
        fun(){
          this.$router.push("/mine")
        },
      //验证手机号码部分
      sendcode(){
        var reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
        //var url="/nptOfficialWebsite/apply/sendSms?mobile="+this.ruleForm.phone;
        if(this.phone==''){
          alert("请输入手机号码");
        }else if(!reg.test(this.phone)){
          alert("手机格式不正确");
        }else{
          this.time=60;
          this.disabled=true;
          this.timer();
        }
      },
      timer() {
        if (this.time > 0) {
          this.time--;
          this.btntxt=this.time+"s后重新获取";
          setTimeout(this.timer, 1000);
        } else{
          this.time=0;
          this.btntxt="获取验证码";
          this.disabled=false;
        }
      }
    }
  }
</script>

<style scoped>
.icon-zuojiantou{
  font-size: .24rem;
}
.icon-yanzhengma{
  color: #000;
}
h6{
  padding: 0 .4rem;
  font-size: .12rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
h6 span:nth-child(2){
  padding-left: .08rem;
  color: #999;
}
h5{
  width: 100%;
  height: .9rem;
  line-height: 1.1rem;
  text-align: center;
}
button{
  font-size: .2rem;
  width: 3rem;
  height: .45rem;
  line-height: .45rem;
  border-radius: .45rem;
  background-color: rgb(48, 47, 47);
  color: #fff;
}
h1{
  height: .5rem;
  line-height: .5rem;
  font-size: .24rem;
  font-weight: 700;
  margin-bottom: .5rem;
}
h1 i{
  margin: 0 1.15rem 0 .2rem;
}
h2,h3,h4{
  margin: 0 auto;
  width: 3rem;
  height: .5rem;
  border: .01rem solid #999;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
h2 i{
  padding:0 .1rem;
}
h2 input{
  width: 1.8rem;
  height: .5rem;
  font-size: .18rem;
}
h3,h4{
  border-top:none ;
}
h3 i{
  color: green;
  padding:0 .1rem;
}
h3 input{
  width: 1.6rem;
  height: .5rem;
  font-size: .18rem;
}
h4{
  justify-content: flex-start;
  margin-bottom: .2rem;
}
h4 i{
  padding:0 .13rem;
}
h4 input{
  height: .5rem;
  font-size: .18rem;
}
</style>